<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        {{area}}
    </div>
    <script>
        let vm = Vue.createApp({
            data() {
                return {
                    length: 2
                }
            },
            methods: {
                mianji(){
                    return this.length*this.length*Math.random()
                },
                getA: ()=>Math.random()
                // getA(){
                //     return Math.random()
                // }
            },
            computed: {
                // 计算属性
                // 方法名必须和监听的属性名字相一致
                // 可以根据依赖的响应式数据而实时变化
                // 默认情况是get的数据读取
                // 计算属性可以缓存
                // area(){
                //     return this.length*this.length
                // }

                area: {
                    get() {
                        return this.length * this.length*Math.random()
                    },
                    // value变化之后新的值（value随便写）
                    set(value) {
                        this.length=Math.sqrt(value)

                    }
                },
                 getB:()=>Math.random(),
                 r(){
                    return Math.sqrt(this.area/Math.PI)
                 }

            }
        }).mount('#app')
        // vm.length = 3
        // 计算属性中的输出
        // 计算属性输出不需要加（）
        // console.log(vm.area);
        // vm.area=9
        // console.log(vm.length);
        // // 方法的输出
        // console.log(vm.mianji());
        console.log('方法');

        console.log(vm.getA());
        console.log(vm.getA());
        console.log(vm.getA());
        console.log('计算属性');
        // 缓存，
        

        console.log(vm.getB);
        console.log(vm.getB);
        console.log(vm.getB);
        console.log('fenge__________');
        console.log(vm.area);
        console.log(vm.area);
        vm.length=3;
        // 当计算属性所依赖是的响应式数据发生变化时，计算属性才会重新计算
        // 所依赖是是响应式数据，计算属性就不会缓存吗？
         console.log(vm.area);
        console.log(vm.area);

        console.log(vm.r);
        vm.length=20;
        // 计算属性具有传递性
        console.log(vm.r);

        
        
        


        
        
        
        

    </script>
</body>

</html>